<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
    <title>管理员首页</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://bootswatch.com/4/materia/bootstrap.min.css" >
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
        var itemHeight = 40;
        var dividerHeight = 1;

        function openMenu(obj) {
            menuTitleId = obj.id;
            menuId = "menu" + menuTitleId.substring(10);
            indicatorId = "indicator" + menuTitleId.substring(10);

            menu = document.getElementById(menuId);
            indicator = document.getElementById(indicatorId);
            height = menu.style.height;

            if (height == "0px" || height == "") {
                childAmount = menu.getElementsByTagName('div').length;
                dividerAmount = menu.getElementsByTagName('li').length;
                height = childAmount * itemHeight + dividerAmount * dividerHeight;
                menu.style.height = height + "px";
                indicator.style.transform = "rotate(180deg)";
            } else {
                menu.style.height = "0px";
                indicator.style.transform = "rotate(0deg)";
            }
        }
    </script>
    <style>
        .menus {
            width: 310px;
            overflow: hidden;
            background-color: lightyellow;
        }

        .menu {
            overflow: hidden;
            height: 0px;
            transition: all 0.3s ease;

        }

        .menu_title {
            width: 310px;
            height: 50px;
            line-height: 50px;
            background: white;
            color: black;
            font-size: 20px;
            padding-left: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;

            overflow: hidden;
        }

        .menu_title:hover {
            background: #f0f0f0;
            color: #23527c;
        }

        .indicator {
            width: 50px;
            height: 50px;
            font-weight: bold;
            position: absolute;
            right: 0px;
            top: 0px;
            transition: all 0.3s ease;

            text-align: center;
        }

        .item {
            width: 310px;
            height: 40px;
            line-height: 40px;
            background: #ffffff;
            color: white;
            padding-left: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
            overflow: hidden;
        }

        .item:hover {
            background: antiquewhite;
        }

        .item a {
            width: 290px;
            height: 40px;
            display: block;
            text-decoration: none;
            color: #000000;
            text-decoration: none;
            font-size: 16px;
        }

        .item_divider {
            width: 322px;
            height: 1px;
            background: white;
            display: block;
            opacity: 0.8;
            margin-left: 4px;
        }

        .menu_divider {
            width: 100%;
            height: 1px;
            background: #e9e9e9;
        }

        .major-title {
            font-size: 30px;
            font-weight: bold;
            padding-left: 30px;
            padding-top: 20px;
        }

        .course-title {

            padding-top: 20px;
            font-family: SimHei;
        }


        .jiangshi {
            padding-top: 40px;
            color: rgba(24,24,24,0.57);
        }

        .keshi {
            padding-left: 70px;
            padding-top: 40px;
            color: rgba(24,24,24,0.57);
        }

        .course {
            margin-left: 30px;
            height: 170px;
            width: 800px;
            background-color: white;

        }

        .object-img {
            padding-left: 10px;
            width: 240px;
            height: 135px;
        }



    </style>
</head>
<body>
<div calss="container" style="background-color: #f4f4f4">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <h2 class="navbar-brand" href="#">大学课程在线学习系统>个人主页</h2>
    </nav>
    <div style="padding-left: 30px;">
        <h1 class="display-5" style="padding-top: 20px;" >您好，${sessionScope.user_session.userName}</h1>
        <p class="lead">ID:${sessionScope.user_session.userAccount}</p>
        <hr class="my-3">
    </div>
    <div class="row" style="padding-left: 20px;background-color: #f4f4f4;height: 446px;">
        <div class="col-sm-3">
            <div class="alert alert-dismissible alert-success">
                <h1 style="font-weight: bold;padding-left: 10px;font-size: 24px;">信息管理</h1>
            </div>
            <div class="menus">
                <div id="menu_title4" class="menu_title" onclick="openMenu(this)">
                    学生管理
                    <div class="indicator" id="indicator4">^</div>
                </div>
                <div class="menu" id="menu4">
                    <div class="item">
                        <a href="/cyb/studentShowPage">学生信息</a>
                    </div>
                    <li class="item_divider"></li>
                    <div class="item">
                        <a href="/cyb/addStudentPage">添加学生</a>
                    </div>
                </div>
                <li class="menu_divider"></li>
                <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
                    课程管理
                    <div class="indicator" id="indicator2">^</div>
                </div>
                <div class="menu" id="menu2">
                    <div class="item">
                        <a href="/cyb/course/showCoursePage">课程信息</a>
                    </div>
                    <li class="item_divider"></li>
                    <div class="item">
                        <a href="/cyb/course/addCoursePage">创建课程</a>
                    </div>
                </div>
        </div>
        </div>
        <div style="background-color: #e9e9e9;width: 1px;height: 446px;"></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>
